<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
        <!-- css -->
        <link href="../css/font-awesome.min.css" rel="stylesheet" type="text/css"/>
        <link href="../css/simple-line-icons.min.css" rel="stylesheet" type="text/css"/>
        <link href="../css/bootstrap.min.css" rel="stylesheet" type="text/css"/>
        <link href="../css/components.min.css" rel="stylesheet" type="text/css"/>
        <link href="../css/layout.min.css" rel="stylesheet" type="text/css"/>
        <link href="../css/light.min.css" rel="stylesheet" type="text/css"/>
        <link href="../css/main.css" rel="stylesheet" type="text/css"/>
        <link href="../css/multi-select.css" rel="stylesheet" type="text/css"/>
        <!-- js -->
        <script src="../js/jquery-1.9.1.min.js" type="text/javascript"></script>
        <script src="../js/bootstrap.min.js" type="text/javascript"></script>
        <script src="../js/app.min.js" type="text/javascript"></script>
        <script src="../js/layout.min.js" type="text/javascript"></script>
        <script src="../js/main.js" type="text/javascript"></script>
        <script src="../js/select2.full.min.js" type="text/javascript"></script>
        <script src="../js/jquery.multi-select.js" type="text/javascript"></script>
        <script src="../js/bootstrap-select.min.js" type="text/javascript"></script>
        <script src="../js/components-multi-select.min.js" type="text/javascript"></script>
        <script src="../js/jquery.bootstrap-growl.min.js" type="text/javascript"></script>
        <title>商品详情</title>
        <!-- END THEME LAYOUT STYLES -->
    </head>
    <!-- END HEAD -->

    <body class="page-header-fixed page-sidebar-closed-hide-logo page-content-white">
        <div class="page-header navbar navbar-fixed-top">
            <!-- BEGIN HEADER INNER -->
            <div class="page-header-inner ">
                <div class="page-logo">
                    <img class="ml40 mt15" src="../images/icons/logo.png" alt=""/>
                </div>
                <a href="javascript:;" class="menu-toggler responsive-toggler" data-toggle="collapse" data-target=".navbar-collapse">
                    <span></span>
                </a>
                <div class="page-top">
                    <div class="top-menu">
                        <ul class="nav navbar-nav pull-right">
                            <li class="separator hide"> </li>
                            <li class="dropdown dropdown-user dropdown-dark">
                                <a href="javascript:;" class="dropdown-toggle" data-toggle="dropdown" data-hover="dropdown" data-close-others="true">
                                    <img alt="" class="user-img" src="../images/icons/user.png" /> 
                                </a>
                                <ul class="dropdown-menu dropdown-menu-default">
                                    <li>
                                        <a href="mybooking.html">
                                            <img src="../images/icons/mybooking.png" alt=""/>&nbsp;&nbsp;我的订单
                                        </a>
                                    </li>
                                    <li>
                                        <a href="myinfo.html">
                                            <img src="../images/icons/myinfo.png" alt=""/>&nbsp;&nbsp;用户信息
                                        </a>
                                    </li>
                                    <li>
                                        <a href="repwd.html">
                                            <img src="../images/icons/repwd.png" alt=""/>&nbsp;&nbsp;修改密码
                                        </a>
                                    </li>
                                </ul>
                            </li>
                            <li class="dropdown dropdown-extended dropdown-tasks dropdown-dark">
                                <a href="login.html" class="logout">Lot out</a>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
        <div class="page-container">
            <div class="page-sidebar-wrapper">
                <div class="page-sidebar navbar-collapse collapse">
                    <ul class="page-sidebar-menu  page-header-fixed ">
                        <li class="nav-item start">
                            <a href="index.html" class="nav-link nav-toggle">
                                <img class="icon" src="../images/icons/home.png" alt=""/><span class="title">首页</span>
                                <span class="selected"></span>
                            </a>
                        </li>
                        <li class="nav-item">
                            <a href="yunzhuji.html" class="nav-link nav-toggle">
                                <img class="icon" src="../images/icons/yunzhuji.png" alt=""/><span class="title">云主机</span>
                                <span class="selected"></span>
                            </a>
                        </li>
                        <li class="nav-item">
                            <a href="yunjiankong.html" class="nav-link nav-toggle">
                                <img class="icon" src="../images/icons/yunjiankong.png" alt=""/><span class="title">云监控</span>
                                <span class="selected"></span>
                            </a>
                        </li>
                        <li class="nav-item">
                            <a href="yunqunzu.html" class="nav-link nav-toggle">
                                <img class="icon" src="../images/icons/yunqunzu.png" alt=""/><span class="title">云群组</span>
                                <span class="selected"></span>
                            </a>
                        </li>
                        <li class="nav-item open active">
                            <a href="yunshichang.html" class="nav-link nav-toggle">
                                <img class="icon" src="../images/icons/yunshichang.png" alt=""/><span class="title">云市场</span>
                                <span class="selected"></span>
                            </a>
                        </li>
                        <li class="nav-item">
                            <a href="gerenguanli.html" class="nav-link nav-toggle">
                                <img class="icon" src="../images/icons/manager.png" alt=""/><span class="title">管理中心</span>
                                <span class="selected"></span>
                            </a>
                        </li>
                        <li class="nav-item">
                            <a href="admin.html" class="nav-link nav-toggle">
                                <img class="icon" src="../images/icons/admin.png" alt=""/><span class="title">admin管理</span>
                                <span class="selected"></span>
                            </a>
                        </li>
                    </ul>
                    <!-- END SIDEBAR MENU -->
                    <!-- END SIDEBAR MENU -->
                </div>
                <!-- END SIDEBAR -->
            </div>
            <!-- END SIDEBAR -->
            <!-- BEGIN CONTENT -->
            <div class="page-content-wrapper">
                <!-- BEGIN CONTENT BODY -->
                <div class="page-content">
                    <div id="content">
                        <div id="product" class="">
                            <div class="yunshichang-header clearfix">
                                <img class="header-img" src="../images/yunshichang/header.png" alt=""/><span class="yunshichang-title">云市场</span>
                                <span class="sub-title">Cloud Market</span>
                            </div>
                            <div class="product-header clearfix default-header mt15">
                                <a href="yunshichang.html">云市场</a>
                                <i class="fa fa-angle-right" aria-hidden="true"></i>
                                <span>商品详情</span>
                            </div>
                            <div class="pt15 pb50 bg-default pl20 pr20">
                                <div class="product-content  clearfix">
                                    <div class="product-info mt10">
                                        <div class="pull-left mr15"><img src="../images/yunshichang/placeholder.png" alt=""/></div>
                                        <div class="pro-name">商品名称商品名称商品名称</div>
                                        <div class="pro-original mt15"><span class="pro-label color-687780">原价：</span><span class="pro-price"><i class="fa fa-jpy" aria-hidden="true"></i>280.00</span></div>
                                        <div class="pro-present mt15"><span class="pro-label color-687780">折扣价：</span><span class="pro-price"><i class="fa fa-jpy" aria-hidden="true"></i>198.00</span></div>
                                        <div class="mt15"><span class="pro-label color-687780">单位：</span><span class="color-687780">年</span></div>
                                        <div class="mt15 color-687780">商品简介：本云服务器产品适用系统版本：linux，负载方式内容分发，网络质保365天,15天内交付</div>
                                        <div class="mt15">
                                            <div class="w200px pull-left"><a class="btn btn-orange btn-block" data-toggle="modal" data-target=".purchaseModal">立即购买</a></div>
                                        </div>
                                    </div>
                                </div>
                                <div class="border-line mt15 mb15"></div>
                                <div class="">
                                    <div class="h4 strong color-687780">商品详情</div>
                                    <div class="color-687780 line-line-height25">本云服务器产品适用系统版本：linux，负载方式内容分发，网络质保365天,15天内交付。本云服务器产品适用系统版本：linux，负载方式内容分发，网络质保365天,15天内交付。本云服务器产品适用系统版本：linux，负载方式内容分发，网络质保365天,15天内交付。本云服务器产品适用系统版本：linux，负载方式内容分发，网络质保365天,15天内交付。本云服务器产品适用系统版本：linux，负载方式内容分发，网络质保365天,15天内交付。本云服务器产品适用系统版本：linux，负载方式内容分发，网络质保365天,15天内交付。本云服务器产品适用系统版本：linux，负载方式内容分发，网络质保365天,15天内交付。本云服务器产品适用系统版本：linux，负载方式内容分发，网络质保365天,15天内交付。本云服务器产品适用系统版本：linux，负载方式内容分发，网络质保365天,15天内交付。</div>
                                </div>
                            </div>
                        </div><!-- content -->
                    </div>
                </div>     
            </div>
            <!-- END QUICK SIDEBAR -->
        </div>
        <div class="page-footer">
            <div class="page-footer-inner">

            </div>
            <div class="scroll-to-top">
                <i class="icon-arrow-up"></i>
            </div>
        </div>
        <div class="modal fade modal-default purchaseModal" tabindex="-1" role="dialog" aria-labelledby="purchaseModal" aria-hidden="true">
            <div class="modal-dialog modal-md">
                <div class="modal-content bg-eaebef">
                    <div id="productInfo" class="text-center  ">
                        <div class="modal-title"><span class="close" data-dismiss="modal"></span>请核对商品信息</div>
                        <div class="pl15 pr15 pt10">
                            <div class="font-16 strong text-left pl30 color-6b9fbb">商品名称商品名称商品名称</div>
                            <form id="price-form" class="form-horizontal mt15">
                                <input type="hidden" value="198" id="price-text"/>
                                <div class="form-group">
                                    <label for="number" class="col-md-4 control-label">购买数量</label>
                                    <div class="col-md-7">
                                        <input type="number" class="form-control" id="number" value="1"/>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="col-md-4 control-label">商品总价</label>
                                    <div class="col-md-7 text-left">
                                        <label class="control-label color-red1"><i class="fa fa-jpy" aria-hidden="true"></i><span id="total">198</span></label>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <div class="clearfix">
                                        <label class="col-md-4 control-label">选择支付方式</label>
                                    </div>
                                    <div class="mt-radio-list pl70 clearfix text-left mt15">
                                        <label class="local-radio mt-radio col-sm-6">
                                            <input type="radio" name="type" id="optionsRadios1" value="1" checked="">
                                            <img src="../images/yunshichang/alipay.png" alt=""/>
                                            <span class="mt20"></span>
                                        </label>
                                        <label class="local-radio mt-radio col-sm-6">
                                            <input type="radio" name="type" id="optionsRadios2" value="2" >
                                            <img src="../images/yunshichang/placeholder2.png" alt=""/>
                                            <span class="mt20"></span>
                                        </label>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <button id="proInfoSubmit" class="btn btn-blue w200px">确认提交</button>
                                </div>
                            </form>
                            <div class="border-line mt10 mb10"></div>
                            <div >购买成功后请留意系统消息，如有问题，请<a>联系客服</a></div>
                        </div>
                    </div>
                    <div id="remittance" class="text-center" style="display: none;">
                        <div class="modal-title pt10"><span class="close" data-dismiss="modal"></span><div class="text-left pl10">请您汇款<span class="color-orange font-24">￥<span id="remittance-number">560.00</span></span> 至任意以下账户</div></div>
                        <div class="pt10 pl15 pr15">
                            <div class="mt10 bankCard">
                                <div class="font-16 color-6b9fbb">中国银行徐汇支行</div>
                                <div class="mt10 color-687780 strong">6222 5286 6598 6325 636</div>
                                <div class="mt10 color-687780">上海纷讯信息科技有限公司</div>
                            </div>
                            <div class="mt20 bankCard">
                                <div class="font-16 color-6b9fbb">中国银行徐汇支行</div>
                                <div class="mt10 color-687780 strong">6222 5286 6598 6325 636</div>
                                <div class="mt10 color-687780">上海纷讯信息科技有限公司</div>
                            </div>
                            <form id="price-form" class="form-horizontal mt20">
                                <input type="hidden" value="198" id="price-text"/>
                                <div class="form-group">
                                    <label for="number" class="col-md-4 control-label color-687780">请填写汇款时的留言</label>
                                    <div class="col-md-7">
                                        <input type="text" class="form-control"/>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="col-md-4 control-label color-687780">联系电话</label>
                                    <div class="col-md-7 text-left">
                                        <input type="text" class="form-control"/>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <a class="btn btn-blue">我已汇款</a>
                                    &nbsp;&nbsp;&nbsp;&nbsp;
                                    <a class="btn btn-default" data-dismiss="modal">未汇款</a>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <script>
            $(document).ready(function () {
                //计算价格
                $('#number').keyup(function () {
                    var price = $('#price-text').val();
                    var number = $('#number').val();
                    var total = 0;
                    if (number >= 0) {
                        total = price * number;
                    }
                    $('#total').text(total);
                });
                //提交
                $('#proInfoSubmit').click(function (e) {
                    e.preventDefault();
                    var remittanceNumber = $('#total').text();
                    var type = $('#price-form input[name="type"]:checked ').val();
                    //若选择对公汇款,显示汇款信息
                    if (type == 2) {
                        $('remittance-number').text(remittanceNumber);
                        $('#productInfo').hide();
                        $('#remittance').show();
                    }
                });
                //已汇款
                $('#hasRemittance').click(function () {
                    $('#remittance').hide();
                    $('#productInfo').show();
                });
                $('.purchaseModal').on('hidden.bs.modal', function (e) {
                    $('#remittance').hide();
                    $('#productInfo').show();
                });
            });
        </script>
        <!--[if lt IE 9]>
<script src="../assets/global/plugins/respond.min.js"></script>
<script src="../assets/global/plugins/excanvas.min.js"></script> 
<![endif]-->
    </body>
</html>